<template>
  <div class="future-weather">
    <div>
      <h3>最后更新时间：{{ updateTime }}</h3>
      <p>
        <span class="color_red">{{location.name}}</span>
        未来24小时的天气情况
      </p>
    </div>
    <div class="chart-container" ref="chartContainer"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts/core";
import { GridComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import dayjs from 'dayjs' ;// ES 2015

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
import { KEY,API_24H } from "../common/constrant";
import { mapState } from 'vuex';
export default {
  data(){
    return{
      hourly: [],
      hourWeatherData:{
        fxTime:[],//x轴数据
        temp:[],//series数据
      },
      updateTime:""
    };
  },
  computed:{
    // location:function(){
    //   return this.$store.state.location;
    // },
    ...mapState([
      "location",
    ])
  },
  methods: {
    //获取API数据
    getData() {
      axios
        .get(API_24H, {
          params: {
            // location: "101270101",
            location:this.location.id,
            key: KEY,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.hourly = res.data.hourly;
          this.updateTime = dayjs(res.data.updateTime).format(
            "YYYY-MM-DD HH:mm:ss"
            );
            //初始化fxtime和temp为空,此getData方法在侦听器中会被多次使用
            this.hourWeatherData.fxTime = []
            this.hourWeatherData.temp = []
          //遍历24小时天气数据，分别取出数据中的部分数据
          this.hourly.forEach(element =>{
            this.hourWeatherData.fxTime.push(element.fxTime)
            this.hourWeatherData.temp.push(element.temp)
          });
          //需要出来fxTime这个数组，把数组中的每个值都通过格式化，只显示HH
          //let fxTimeHH = []
          //1.这是传统方式
          // this.hourWeatherData.fxTime.forEach(element =>{
          //   fxTimeHH.push(dayjs(element).format("HH"))
          // });
          //2.1.Array.map方法的传统callbackFn传统函数写法
          // fxTimeHH = this.hourWeatherData.fxTime.map(function(element){
          //   return dayjs(element).format("HH")
          // })
          //2.2.Array.map方法的callbackFn箭头函数
          // fxTimeHH = this.hourWeatherData.fxTime.map((element)=>{
          //   return dayjs(element).format("HH")
          //   })
          //fxTimeHH = this.hourWeatherData.fxTime.map((element) => dayjs(element).format("HH"))
          // fxTimeHH = this.hourWeatherData.fxTime.map(element => dayjs(element).format("HH"))
          // console.log("---------"+fxTimeHH)

          //调用初始化图表方法
          // this.initChart(this.hourWeatherData.fxTime,this.hourWeatherData.temp)

          //3.最简便的写法，直接在函数中对fxTime数组调用map方法进行元素处理，把map方法的返回值作为函数的参数
          this.initChart(
            this.hourWeatherData.fxTime.map((element) =>
            dayjs(element).format("HH")
            ),
            this.hourWeatherData.temp
          )
        });
    },
    //初始化图标,有两个参数，x坐标的内容和图表值(y坐标)
    initChart(xAxisData, seriesData) {
      //此种方式是通过js的dom获取网页元素，但在vue中不能这么使用
      //var chartDom = document.getElementById("main");
      //这是vue中获获取网页元素的方式：ref
      var chartDom = this.$refs.chartContainer;
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: xAxisData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: seriesData,
            type: "line",
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.getData();
  },
  //添加侦听器
  watch:{
    location:function(){
      // 当监听到location有变化时,重新调用网络请求方法getData(),发起新的请求
      this.getData()
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chart-container{
  height: 20rem;
}
span.color_red{
  color: red;
}
</style>
